<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit">
		<title>企业进销存系统</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="/static/bootstrap3/js/holder.js"></script>
		<script src="/static/bootstrap3/jquery-1.9.1.min.js"></script>
		<script src="/static/bootstrap3/js/bootstrap.js"></script>
		<!-- 字体图标 -->

		<link rel="shortcut icon" href="/static/images/favicon.ico" th:href="@{/static/favicon.ico}" type="image/x-icon">

		<link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">

		<link rel="stylesheet" type="text/css" href="/static/bootstrap3/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="/static/css/top.css">
		<link rel="stylesheet" type="text/css" href="/static/css/index.css">
		<link rel="stylesheet" type="text/css" href="/static/css/layout.css">
		<link rel="stylesheet" type="text/css" href="/static/css/login.css">
		<link rel="stylesheet" type="text/css" href="/static/css/footer.css">

	<style type="text/css">
		.loginDiv{
			    position: absolute;
			    left:950px;
			    top:160px;
		}
		.header{
			font-size: 16px;
			padding: 0 0 20px 0;
		}
		@media (max-width:1478px) {
			.loginDiv{
				left: 500px;
			}
		}

	/*	@media (max-width: 1029px) {
			.loginDiv{
				left:300px ;
			}
		}*/
	</style>


	</head>
	<body>

<!--	注册modal-->
	<div id="error_modal" class="modal fade  bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h3 class="modal-title text-center" id="gridSystemModalLabel">注册失败提示</h3>
				</div>
				<div class="modal-body">
					<h4 class="text-danger" id="error_content">....</h4>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
		<!-- <div class="alert alert-danger fade in">
		    <button type="button" class="close" data-dismiss="alert">&times;</button>
		    <strong>警告框标题</strong> 提交失败！
		</div> -->
		<!--头部-->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" >错误信息提示</h4>
					</div>
					<div class="modal-body">
						<h4 class="modal-title">用户名或密码不正确，请重新输入</h4>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal">Reset</button>
					</div>
				</div>
			</div>
		</div>
		<header class="header">

			<img src="/static/login_img/2020-12-05_172242.png">
			<span class="pull-right" style="margin-top: 25px; margin-right: 70px;">
				<span style="margin-right:10px;">欢迎访问</span>|
				<span class="text-danger" style="margin-right: 10px">企业经销存系统</span>
				 <span>
					 <span class="dropdown">
				          <a href="#" style="text-decoration:none;" class="text-muted dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">关于我们<span class="caret"></span></a>
				          <ul class="dropdown-menu">
				            <li><a href="#">品质保障</a></li>
				            <li><a href="#">私人订制</a></li>
				            <li><a href="#">员工特供</a></li>
				            <li role="separator" class="divider"></li>
				            <li><a href="#">专属特权</a></li>
				          </ul>
					</span>
				</span>
			</span>
		</header>
		<!--主体-->
		<div class=" mycontent text-left">

			<!--轮播图-->
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" style="height: 561px;" role="listbox">
					<div class="item active">
						<img src="static/login_img/100402-15673898420c2c.jpg" width="100%"  >
						<div class="carousel-caption"></div>
					</div>
					<div class="item">
						<img src="static/login_img/210433-1483707873d702.jpg" width="100%" >
						<div class="carousel-caption"></div>
					</div>
					<div class="item">
						<img src="static/login_img/224708-16025140287ab4.jpg" width="100%" >
						<div class="carousel-caption"></div>
					</div>

				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>



			<!--透明层 -->

			<div class="loginDiv" >
				<p>用户登录</p>
				<!--表单开始-->
				<form  class="form-horizontal" role="form">
					<!--用户名-->
					<div class="form-group">
						<label for="username" class="col-md-3 control-label">名字：</label>
						<div class="col-md-8">
							<input type="text" class="form-control" id="username" placeholder="请输入用户名">
						</div>
					</div>
					<!--密码-->
					<div class="form-group">
						<label for="password" class="col-md-3 control-label">密码：</label>
						<div class="col-md-8">
							<input type="password" class="form-control" id="password" placeholder="请输入密码">
						</div>
					</div>
					<!-- 记住我-->
					<div class="form-group">
						<div class="col-md-offset-3 col-md-6">
							<div class="checkbox">
								<label><input type="checkbox" id="auto" name="remember">自动登录</label>
							</div>
						</div>
					</div>
					<!--提交按钮-->
					<div class="form-group">
						<label class="col-md-3 control-label"></label>
						<div class="col-md-8">
							<input id="btn-login" type="button" class="btn btn-primary" value="登录" />
							<span class="pull-right"><small>还没有账号？</small><a href="#" id="register">注册</a></span>
						</div>
					</div>
				</form>
			</div>
		</div>

		<!--页脚开始-->
		<footer class="footer">
			<!-- 品质保障，私人定制等-->
			<div class="text-center rights container">
				<div class="col-md-offset-2 col-md-2">
					<span class="fa fa-thumbs-o-up"></span>
					<p>品质保障</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-address-card-o"></span>
					<p>私人订制</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-graduation-cap"></span>
					<p>学生特供</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-bitcoin"></span>
					<p>专属特权</p>
				</div>
			</div>
			<!--联系我们、下载客户端等-->
			<div class="container beforeBottom">
				<div class="col-md-offset-1 col-md-3">

					<div><img src="/static/login_img/2020-12-05_171743.png" alt="" class="footLogo"></div>

					<div><img src="/static/login_img/2020-12-05_174748.png" alt="" class="footLogo"></div>
				</div>
				<div class="col-md-4 callus text-center">
					<div class="col-md-4">
						<ul>
							<li><a href="#"><p>买家帮助</p></a></li>
							<li><a href="#">新手指南</a></li>
							<li><a href="#">服务保障</a></li>
							<li><a href="#">常见问题</a></li>
						</ul>
					</div>
					<div class="col-md-4">
						<ul>
							<li><a href="#"><p>商家帮助</p></a></li>
							<li><a href="#">商家入驻</a></li>
							<li><a href="#">商家后台</a></li>
						</ul>
					</div>
					<div class="col-md-4">
						<ul>
							<li><a href="#"><p>关于我们</p></a></li>
							<li><a href="#">关于企业</a></li>
							<li><a href="#">联系我们</a></li>
							<li>
								<span class="fa fa-wechat"></span>
								<span class="fa fa-weibo"></span>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-4">


					<div class="col-md-5">
						<img src="/static/images/index/ios.png" class="lf">
						<img src="/static/images/index/android.png" alt="" class="lf">
					</div>
					<div class="col-md-6">
						<img src="/static/images/index/erweima.png">
					</div>
				</div>
			</div>

			
			<!-- 页面底部-备案号 #footer
			-->
			<div class="col-md-12 text-center bottom">
				Copyright © 2018 Tedu.cn All Rights Reserved 京ICP备08000853号-56 <a target="_blank" href="http://www.tedu.cn/">达内时代科技集团有限公司</a>
				版权所有
			</div>
		</footer>
		<!--页脚结束-->
		<script src="/static/bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/js/autoLogin.js" type="text/javascript"></script>
		<script language="JavaScript">
		$(function(){
				registUI('register','/register');
				function registUI(register,ui){
					$('#register').click(function () {
						$(".loginDiv").empty();
						$(".loginDiv").load(ui);
					})
				}


			// 验证用户名
			$("#username").blur(function () {
				let username=$("#username").val();
				let data={"username":username};
				let url="/login/loginbyname";
				if (username!==''&&username!=null) {
					$.get(url, data, function (result) {
						console.log(result);
						if (result.data == null) {
							$("#username").after("<div class='error_message' style='color: #d43f3a'>*此用户名不存在</div>");
						} else {
							// console.log(result.data);
							return ;
						}
					})
				}
			})
			// 获取焦点
			$("#username").focus(function () {
				// console.log("111");
				$(".error_message").remove();
			})
			// 点击登录登录时

			$("#btn-login").click(function() {
				let password=$("#password").val();
				let username=$("#username").val();
				let remember=$("#auto").prop("checked");
				console.log(remember);
				let  data={"username":username,"password":password,"remember":remember};
				let url="/login/login";
				if ((username!=''&&username!=null)&&(password!=''&&password!=null)) {
					$.post(
							url, data, function (result) {
								console.log(result);
								if (result.status==1){
									location.href="/index";
								}else{
									$("#myModal").modal("show");
								}
							}
					)
				}else{
					$(".error_message").remove();
					$("#username").after("<div class='error_message' style='color: #d43f3a'>*用户名和密码不能为空，请输入</div>");
				}
				// location.href = "index.html";
			});
			$(document).keydown(function(event) {
				if (event.keyCode==13) {
					let password = $("#password").val();
					let username = $("#username").val();
					let remember = $("#auto").prop("checked");
					console.log(remember);
					let data = {"username": username, "password": password, "remember": remember};
					let url = "/login/login";
					if ((username != '' && username != null) && (password != '' && password != null)) {
						$.post(
								url, data, function (result) {
									console.log(result);
									if (result.status == 1) {
										location.href = "/index";
									} else {
										$("#myModal").modal("show");
									}
								}
						)
					} else {
						$(".error_message").remove();
						$("#username").after("<div class='error_message' style='color: #d43f3a'>*用户名和密码不能为空，请输入</div>");
					}
					// location.href = "index.html";
				}
				});
			// 设置轮播图时间
			/*$('.carousel').carousel({
			  interval: 3000
			});*/
		})

		/*$("#btn-login").click(function() {

			location.href = "index.html";
		});*/
		</script>
	</body>
</html>
